{include file="common/dialog/editor_dialog_h"}
<script>

    Vue.component('media_modal', {
        template: '#modal-template',
        props: ["dataType", "height"],
        data: function () {
            return {
                selectedVal: '',
                keyword: '',
                data: [],
                dataTotalCount: -1,
                selectedGroup: -1,
                currentPageIndex: 1,
                groups: [],
                selected_mask: 0,
                dataSource: {
                    10: {
                        url: '${ctx}/material/news/datagrid?shared=true',
                        rows: 10
                    },
                    2: {
                        url: '${ctx}/material/image/datagrid?shared=true',
                        rows: 10
                    },
                    3: {
                        url: '${ctx}/material/voice/datagrid?shared=true',
                        rows: 10
                    },
                    15: {
                        url: '${ctx}/material/video/datagrid?shared=true',
                        rows: 10
                    }
                }
            }
        },
        computed: {
            evenNumbersNews: function () {
                return this.data.filter(function (item, index) {
                    return index % 2 === 0
                })
            },
            oddNumbersNews: function () {
                return this.data.filter(function (item, index) {
                    return index % 2 !== 0
                })
            },
            pageCount: function () {
                var _s = this;
                var _rows = _s.dataSource[_s.dataType].rows;
                var _tmpPageCount = Math.floor(this.dataTotalCount / _rows);
                var _assistent = this.dataTotalCount % _rows;
                if (_assistent !== 0) {
                    return ++_tmpPageCount;
                } else {
                    return _tmpPageCount;
                }
            }
        },
        methods: {
            previewNews: function (_id) {
                window.open('${ctx}/material/news/preview?id=' + _id);
            },
            confirmSelection: function () {

                if (this.selectedVal) {
                    this.$emit("confirm", this.selectedVal, this.dataType);
                }

                this.$emit('close');


            },
            loadData: function () {

                var _s = this;
                var paras = {
                    method: 'POST',
                    url: _s.dataSource[_s.dataType].url
                };
                // paras.headers={"Content-Type":"application/x-www-form-urlencoded; charset=UTF-8"};
                paras.data = {
                    page: _s.currentPageIndex,
                    rows: _s.dataSource[_s.dataType].rows
                };
                if (_s.keyword) {
                    paras.data.keyword = _s.keyword;
                }
                switch (_s.dataType) {
                    case 10:
                        //console.log("此为图文类型");
                        break;
                    case 2:
                        //console.log("此为图片类型");
                        paras.data.category = "material";
                        paras.data.type = "image";
                        paras.data.groupid = _s.selectedGroup;
                        break;
                    case 15:
                        //console.log("视频类素材");
                        break;
                    case 3:
                        //console.log("声音类素材");
                        break;
                    default:
                        paras = null;
                        console.log("未注册类型");
                }
                if (paras) {
                    _s.getData(paras);
                }
            },
            getData: function (opt) {
                var _s = this;
                if (opt.data) {
                    opt.data = $.param(opt.data);
                }
                opt.headers = {'Content-Type': 'application/x-www-form-urlencoded'};
                axios(opt).then(function (response) {
                    if (response.status !== 200) {
                        return;
                    }
                    _s.data = response.data.rows;
                    _s.dataTotalCount = response.data.total;

                }).catch(function (error) {
                    console.log(error);
                });

            },
            loadGroup: function () {
                var _s = this;
                axios({
                    url: "${ctx}/material/image/groups",
                    method: 'get'
                }).then(function (response) {
                    if (response.status !== 200) {
                        console.log(response.statusText);
                        return;
                    }
                    _s.groups = response.data;
                }).catch(function (error) {
                    console.log(error);
                });

            },
            gotoNextPage: function () {
                var _s = this;
                if (_s.currentPageIndex >= _s.pageCount) {
                    return;
                }
                _s.currentPageIndex++;
            },
            gotoPrevPage: function () {
                var _s = this;
                if (_s.currentPageIndex <= 1) {
                    return;
                }
                _s.currentPageIndex--;
            },
            refresh: function () {
                if (this.currentPageIndex === 1) {
                    this.loadData();
                } else {
                    this.currentPageIndex = 1;
                }
            }
        },
        watch: {
            selectedGroup: function () {
                this.selectedVal = '';
                this.refresh();
            },
            currentPageIndex: function () {
                this.loadData();
            }
        },
        mounted: function () {

            var _s = this;
            if (_s.dataType === 2) {
                _s.loadGroup();
            }
            //加载数据
            _s.loadData();

        }
    });
</script>